<template>
	<div class="call-quality-container">
		<template v-if="callQualityList">
			<div class="agent-call" v-for="current in callQualityList" :key="current">
				<p class="title">{{ current.title }}</p>
				<div
					class="call-quality-wrapper"
					:style="
						current.values.length === 1
							? 'width:210px'
							: current.values.length === 2
							? 'width:520px'
							: current.values.length === 3
							? 'width: 832px;'
							: current.values.length === 4
							? 'width: 1150px;'
							: 'width: 100%;'
					"
				>
					<div class="item-wrapper" v-for="(item, index) in current.values" :key="item" :style="index === current.values.length - 1 ? 'border-right: none;padding:0;margin-right:14px' : ''">
						<div class="customer-call-box">
							<p class="sub-title" v-if="item.fromClientRole === 'customer'"> 访客{{ item && item.fromClientName ? item.fromClientName : '- -' }}音视频质量：</p>
							<p class="sub-title" v-else> 坐席{{ item && item.fromClientName ? item.fromClientName : '- -' }}音视频质量：</p>
							<p>
								<span class="label">是否有画面：</span>
								<span class="value">{{ item && item.hasFrame ? item.hasFrame : '- -' }}</span>
							</p>
							<p>
								<span class="label">开画时间：</span>
								<span class="value">{{ item && item.openingTime ? item.openingTime : '- -' }} </span>
							</p>
							<p>
								<span class="label">平均声音延迟：</span>
								<span class="value">{{ item && item.averageSoundDelay ? item.averageSoundDelay : '- -' }} </span>
							</p>
							<p>
								<span class="label">平均画面延迟：</span>
								<span class="value">{{ item && item.averageFrameDelay ? item.averageFrameDelay : '- -' }} </span>
							</p>
							<p>
								<span class="label">画面卡顿比率：</span>
								<span class="value">{{ item && item.screenStuckRatio ? item.screenStuckRatio : '- -' }}</span>
							</p>
							<p>
								<span class="label">记录时间：</span>
								<span class="value">{{ item && item.updatedAt ? item.updatedAt : '- -' }} </span>
							</p>
						</div>
					</div>
				</div>
				<p class="call-line" />
			</div>
		</template>
	</div>
</template>

<script>
import { getSessionQuality } from '@/api/api';
export default {
	name: '',
	components: {},
	props: {
		sessionId: {
			type: String,
			require: true,
			default: () => ''
		}
	},
	data() {
		return {
			callQualityList: []
		};
	},
	mounted() {
		this.initCallQuality();
	},

	methods: {
		async initCallQuality() {
			try {
				const { data } = await getSessionQuality(this.sessionId);
				console.log(data.data, '通话质量');
				this.callQualityList = this.filterQualityData(data.data);
				console.log('callQualityList:', this.callQualityList);
			} catch (error) {
				console.log(error);
				this.$message.error('获取通话质量失败！');
			}
		},
		// 筛接口返回的数据
		getInfoData(array) {
			// console.log(array);
			return array.map(item => {
				// console.log(item, 'getInfoData');
				const result = {
					fromClientName: item.fromClientName,
					fromClientRole: item.fromClientRole,
					toClientName: item.toClientName,
					toClientRole: item.toClientRole,
					toClientId: item.toClientId,
					hasFrame: '- -',
					openingTime: '- -',
					screenStuckRatio: '- -',
					averageFrameDelay: '- -',
					averageSoundDelay: '- -',
					updatedAt: item.updatedAt ? this.$moment(item.updatedAt).format('YYYY-MM-DD HH:mm:ss') : this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss')
				};
				if (item.isVideo && item.hasFrame) {
					result.hasFrame = '是';
				} else if (!item.isVideo) {
					result.hasFrame = '--(语音通话)';
				} else {
					result.hasFrame = '- -';
				}
				if (item.isVideo && (item.screenStuckRatio || item.screenStuckRatio === 0)) {
					result.screenStuckRatio = `${item.screenStuckRatio}%`;
				}
				if (item.isVideo && (item.openingTime || item.openingTime === 0)) {
					result.openingTime = `${item.openingTime}毫秒`;
				}
				if (item.isVideo && (item.averageFrameDelay || item.averageFrameDelay === 0)) {
					result.averageFrameDelay = `${item.averageFrameDelay}毫秒`;
				}
				if (item.averageSoundDelay || item.averageSoundDelay === 0) {
					result.averageSoundDelay = `${item.averageSoundDelay}毫秒`;
				}
				console.log('getInfoData', result);
				return result;
			});
		},
		// 洗接口返回的数据
		filterQualityData(data) {
			const result = [];
			for (const key in data) {
				if (data.hasOwnProperty.call(data, key)) {
					const element = data[key];
					console.log('key', key, element);
					if (element && element.length > 0) {
						let fromUser = {
							name: element[0].toClientName,
							role: element[0].toClientRole
						};
						console.log('fromUser', fromUser);
						let title = fromUser.role === 'agent' ? '坐席' + fromUser.name + '端通话质量' : '访客' + fromUser.name + '端通话质量';
						// 解析里面的小字段。
						let values = this.getInfoData(element);
						console.log('title', title);
						result.push({
							title: title,
							values: values
						});
					}
				}
			}
			console.log(result, 'result');
			return result;
		}
	}
};
</script>

<style lang="less" scoped>
.call-quality-container {
	overflow-x: auto;
	width: 100%;
	background-color: #ffffff;
	.agent-call {
		.title {
			font-size: 13px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #444444;
			margin: 20px 0 6px 0;
		}
		.call-quality-wrapper {
			background: #ffffff;
			box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
			border-radius: 8px;
			border: 1px solid #ececef;
			padding: 7px 0 14px 0;
			display: flex;
			position: relative;
			width: 100%;
			.item-wrapper {
				border-right: 2px solid #ececef;
				display: flex;
				min-width: 266px;
				// width: 266px;
				margin: 0px 10px 0 14px;
				padding-right: 20px;
				.customer-call-box {
					font-size: 12px;
					font-family: PingFangSC-Medium, PingFang SC;
					.sub-title {
						font-weight: 550;
						color: #5e646e;
						line-height: 21px;
						margin-top: 7px;
					}
					p {
						line-height: 23px;
						display: flex;
						justify-content: space-between;
					}
					span {
						display: inline-block;
					}
					.label {
						font-weight: 400;
						color: #5e646e;
					}
					.value {
						font-weight: 400;
						color: #5e646e;
					}
				}
			}
			.vertical-line {
				width: 1px;
				background: #fff;
				display: inline-block;
				margin: 14px 20px 0;
			}
			.border-line-clear {
				border-right: 0;
			}
		}
	}
	.call-line {
		border-bottom: 1px solid #ebebeb;
		margin-top: 15px;
	}
}
</style>
